<template>
  <div style="height: 60vh">
    <div class="first">
      <div style="margin-left: 15px;user-select: none">
        <div style="float: left;">当前位置：</div>
        <div style="float: left;" @click="this.$router.push({path: '/SportsKnowledge'})" class="myLink">运动常识</div>
        <div style="float: left;">{{'>'}}&nbsp;运动常识详情</div>
      </div>
    </div>
    <div class="second"><h2>文章标题</h2></div>
    <div class="third"><div style="position:absolute;left: 28vw">时间</div><div style="position:absolute;left: 38vw">作者</div></div>
    <div class="fourth">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</div>
  </div>
</template>

<script>
export default {
  name: "SportsKnowledgeDetails"
}
</script>

<style scoped>
.first{
  background-color: gainsboro;
  display:flex;
  align-items: center;
  height: 10%;

  &:deep(.el-breadcrumb){
   font-size: 16px;
   height: 21px;
 }
}
.second{
  margin: 10px;
  text-align: center;
  height: 12%;
}
.third{
  height: 10%;
  position: relative;
}
.fourth{
  margin: 0 4vw;
  height: 55%;
  text-overflow:ellipsis;
  overflow:hidden;/*溢出时隐藏 */
  text-indent: 2em;
}
.myLink:hover{
  color: #36d0ff;
}
</style>

